<template>
  <div>
    <!-- 输入框改变获取搜索结果 -->
    <van-search
      v-model="searchText"
      placeholder="请输入搜索关键词"
      @input="inputFn"
    />
    <!-- 热门搜索容器 互斥显示 如果搜索框没有内容显示热门搜索-->
    <div class="search_wrap" v-if="this.searchText.length === 0">
      <!-- 热门搜索标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热门搜索主体 -->
      <div class="hot_name_wrap">
        <span
          class="hot_item"
          v-for="(item, index) in hot"
          :key="index"
          @click="changeText(item)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <div class="search_wrap" v-else>
      <!-- 热门搜索标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          :title="obj.name"
          :label="obj.name + '-' + obj.ar[0].name"
          center
          v-for="(obj, index) in resultList"
          :key="index"
        >
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.8rem" />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearch, getSearchResult } from "@/api/search.js";
export default {
  data() {
    return {
      hot: [], // 热搜列表
      searchText: "", // 搜索关键词
      resultList: [], // 搜索结果列表
      loading: false, // 加载中状态 默认是false
      finished: false, // 加载完成状态 默认是false
      page: 1, // 页码 默认是1
    };
  },
  created() {
    // 调用方法获取数据
    this.loadHotSearch();
  },
  methods: {
    async loadHotSearch() {
      // 加载热搜关键词
      const { data } = await hotSearch();
      // 把请求到的数据放到热搜列表数组里面
      this.hot = data.result.hots;
    },
    // 加载搜索结果
    async loadSearchResult() {
      const { data } = await getSearchResult({
        keywords: this.searchText,
        limit: 30,
        offset: (this.page - 1) * 30,
      });
      // 把请求到的数据放到搜索结果列表数组里面
      this.resultList = data.result.songs;
      // console.log(this.resultList);
    },
    changeText(obj) {
      // 改变搜索框内容
      this.searchText = obj.first;
      // 点击热搜关键词获取搜索结果
      this.loadSearchResult();
    },
    // 输入框改变执行该事件
    async inputFn() {
      // 如果输入框内容为空,清空数组,阻止请求发送
      if (this.searchText.length === 0) {
        this.resultList = [];
        return;
      }
      // 如果歌曲不存在 则清空数组,阻止发送请求
      if (data.result.songs === undefined) {
        this.resultList = [];
        return;
      }
      this.loadSearchResult();
      // 把请求到的数据放到搜索结果列表数组里面
    },
    async onLoad() {
      this.page++;
      // 1.请求获取数据
      const { data } = await this.loadSearchResult();
      // 如果歌曲不存在 则清空数组,阻止发送请求
      if (data.result.songs === undefined) {
        //没有更多数据
        this.finished = true;
        return;
      }
      // 2.把新数据添加到数组尾部
      this.resultList = [...this.resultList, ...data.result.songs];
      // 3.loading设置为false
      this.loading = false;
       // 4.加载完成finished设置为true
      if (this.resultList.length === 0) {
        this.finished = true;
      }
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>